<script>
import StudentApi from "../api/student";
import ClassesApi from "../api/classes";
import ScoreApi from "../api/score";
import CourseApi from "../api/course";

export default {
  data() {
    return {
      stuName: "",
      dataList: []
    };
  },
  methods: {
    async search() {
      let apiStudent = new StudentApi();
      let apiClasses = new ClassesApi();
      let apiScore = new ScoreApi();
      let apiCourse = new CourseApi();

      let data = await apiStudent.search(this.stuName);
      for (let index = 0; index < data.length; index++) {
        const _d1 = data[index];
        _d1.classesName = await apiClasses.get(_d1.classesId);
        let scores = await apiScore.getListByStudentId(_d1.id);
        for (let index = 0; index < scores.length; index++) {
          const _d2 = scores[index];
          _d2.courseName = await apiCourse.get(_d2.courseId);
        }
        _d1.scores = scores;
      }
      this.dataList = data;
      console.log(this.dataList);
    }
  }
};
</script>

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/manager/score' }">成绩管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider />
    <!-- 功能区 -->
    <el-row class="row-bg" justify="space-between">
      <el-col :span="4">
        <h3>成绩查询</h3>
      </el-col>
      <el-col :span="12">
        <el-space wrap>
          <el-input v-model="stuName" placeholder="请输入学生姓名" />
          <el-button type="info" @click="search">查询</el-button>
        </el-space>
      </el-col>
    </el-row>
    <!-- 结果显示 -->
    <el-card v-for="(stu, index) in dataList" :key="index">
      <template #header>
        <div class="card-header">
          <span>
            {{ stu.name }} - {{ stu.classesName.name }} / {{ stu.classesName.department }}
          </span>
        </div>
      </template>
      <div v-for="score in stu.scores" :key="score.id">
        <span>{{ score.courseName.name }}</span>
        -
        <span>平时：{{ score.score1 }}</span>
        /
        <span>期中：{{ score.score2 }}</span>
        /
        <span>期末：{{ score.score3 }}</span>
        /
        <span>总评：{{ score.score4 }}</span>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.el-card {
  margin: 16px 0;
  width: 80vw;
}
</style>
